<template>
  <!-- 同比分析-->
  <div class="base-container">
    <el-row gutter="10">
      <el-col :span="4">
        <div class="analyzeDatePicker">
          <span style="color: #e0e9f2;font-size: 14px">年份:</span>
          <el-date-picker
              v-model="yearData"
              class="analyzeDate"
              style="width: 90px;float: right;margin: 8px 0px 0px 10px;font-size: 14px;color: #FFFFFF;"
              type="year"
              :clearable="false"
              align="right"
              placeholder="年份"
              @change="queryAction"
          />
        </div>
        <TreeMenu ref="communityTree" @handleNodeClick="handleNodeClick" @selTreeList="handleNodeClick"/>
      </el-col>
      <el-col :span="20">
        <type-component @setType="setType"  :layout="'cross'" class="typeComponent" :type="type"/>
        <div
            style="    box-shadow: 0.075rem 0.075rem 0.425rem #131928;background: #151617;padding: 20px 0px;border-radius: 4px;">
          <!--柱状图-->
          <itemized-energy-consumption-chart ref="itemized_energy_consumption_chart"/>
          <div class="line"></div>
          <!--数据查询展示-->
          <itemized-energy-consumption ref="itemized_energy_consumption"/>
        </div>
      </el-col>
    </el-row>

  </div>

</template>

<script>
import TreeMenu from '../../components/CommunityTree.vue';
import TypeComponent from "../../components/TypeComponent.vue";
import moment from "moment";
import ItemizedEnergyConsumptionChart from "@/views/subitem/components/ItemizedEnergyConsumptionChart.vue";
import ItemizedEnergyConsumption from "@/views/subitem/components/ItemizedEnergyConsumption.vue";

let component;
export default {
  name: "AnalyzeManagement",
  components: {ItemizedEnergyConsumption, ItemizedEnergyConsumptionChart, TypeComponent, TreeMenu},
  data() {
    return {
      yearData: moment().format("yyyy"),
      type: 'water'
    }
  },
  methods: {
    async handleNodeClick(val) {
      let queryIds = [];
      queryIds.push(val.rangeId)
      let childrenIds = await component.getChildrenId(val.children);
      queryIds = queryIds.concat(childrenIds);
      //设置区域id
      component.setSelRanges(queryIds, val.rangeId);
    },
    setType(value) {
      this.type = value
      component.queryAction();
    },
    setSelRanges(queryIds, rangeId) {
      component.rangeIds = queryIds;
      component.rangeId = rangeId;
      component.queryAction();
    },
    async queryAction() {
      let showTableView = component.$refs.itemized_energy_consumption;//获取动态组件对象
      let year = moment(component.yearData).format("yyyy");
      let previousYear = moment(component.yearData).subtract(1, 'years').format("yyyy");
      showTableView.year = year + '年';
      showTableView.previousYear = previousYear + '年';
      //数据查询
      let response = await component.$asyncPost("dataAnalysis", {
        actionType: 'yoyDataRangeAnalysis',
        rangeIds: component.rangeIds,
        queryYear: year,
        type: component.type
      });
      if (response.success) {
        showTableView.dataList = response.dataList;
        component.$refs.itemized_energy_consumption_chart.setData(response.chartObj);
      } else {
      }
    },
    async getChildrenId(list) {
      let childrenIds = [];
      for (let range of list) {
        childrenIds.push(range.rangeId);
        if (range.children && range.children.length > 0) {
          let rangeChildrenIds = await component.getChildrenId(range.children);
          childrenIds = childrenIds.concat(rangeChildrenIds);
        }
      }
      return childrenIds;
    },
  },
  mounted() {
    component = this;
    component.$refs.communityTree.selTreeList({actionType: "deviceTreeBySelf", route: "device"});
  }
}
</script>

<style scoped lang="scss">
.typeComponent {
  flex: initial;
  display: flex;
  justify-content: center;
  align-items: center;
}

.analyzeDatePicker {
  height: 50px;
  line-height: 50px;
  margin-bottom: 20px;
  background: #151617;
  box-shadow: 0.075rem 0.075rem 0.425rem #131928;
  width: 93.5%;
  border-radius: 4px;
  padding: 0px 20px;
}
</style>